<template>
  <div class="c-editor-history-bar__container" v-if="canRedo || canUndo">
    <a-flex align="center" justify="center">
      <a-tooltip>
        <template #title>撤回</template>
        <UndoOutlined
          class="c-editor-history-bar__button-icon"
          :class="{ 'c-editor-history-bar__disable-button': !canUndo }"
          @click="unDo"
        />
      </a-tooltip>
      <a-tooltip>
        <template #title>恢复</template>
        <RedoOutlined
          class="c-editor-history-bar__button-icon"
          :class="{ 'c-editor-history-bar__disable-button': !canRedo }"
          @click="reDo"
        />
      </a-tooltip>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { UndoOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { IEditor } from '@/types/global';
import { inject, onMounted, ref } from 'vue';

const canUndo = ref(false);
const canRedo = ref(false);

const canvasEditor: unknown | IEditor = inject('canvasEditor');
onMounted(() => {
  canvasEditor.on('canRedo', (data: any) => {
    canRedo.value = data;
  });
  canvasEditor.on('canUndo', (data: any) => {
    canUndo.value = data;
  });
});

// 撤销
function unDo() {
  canvasEditor.undo();
}

// 恢复
function reDo() {
  canvasEditor.redo();
}
</script>

<style scoped lang="scss">
.c-editor-history-bar__container {
  position: fixed;
  bottom: 15px;
  left: 180px;
  background-color: #fff;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  padding: 5px;
  .c-editor-history-bar__button-icon {
    cursor: pointer;
    font-size: 18px;
    padding: 8px;
    user-select: none;
    &:hover {
      background: rgba(185, 185, 185, 0.2);
    }
  }
  .c-editor-history-bar__disable-button {
    color: rgb(179, 181, 185);
    cursor: not-allowed;
    &:hover {
      background: transparent;
    }
  }
}
</style>
